<template>
  <n-pagination
    v-if="total"
    v-model:page="pageIndex"
    :page-size="pageSize"
    :item-count="total"
    :page-sizes="pageSizes"
    :show-quick-jumper="showQuickJumper"
    show-size-picker
    @update:page="getData"
    @update:page-size="onUpdatePageSize"
  >
    <template #prefix="{ itemCount }"> 共 {{ itemCount }} 项 </template>
  </n-pagination>
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs, watch, nextTick } from 'vue'
  import { NPagination } from 'naive-ui'
  import { useStore } from '@/store'

  export default defineComponent({
    name: 'XPagination',
    components: {
      NPagination
    },
    props: {
      params: {
        type: Object,
        default: () => ({})
      },
      immediate: {
        type: Boolean,
        default: false
      },
      loading: {
        type: Boolean,
        default: false
      },
      showQuickJumper: {
        type: Boolean,
        default: true
      },
      page: {
        type: Number,
        default: 1
      },
      size: {
        type: Number,
        default: 15
      },
      pageSizes: {
        type: Array,
        default: () => [10, 15, 20, 30, 50, 100]
      }
    },
    emits: ['change', 'update:immediate', 'update:loading'],
    setup($props, { emit: $emit }) {
      const $store = useStore()
      const $state = reactive({
        pageIndex: $props.page,
        pageSize: $props.size,
        pageSizes: $props.pageSizes,
        total: 0
      })

      // watch
      watch(
        () => $props.immediate,
        (value) => {
          if (value) {
            $state.pageIndex = $props.page
            nextTick(() => {
              getData()
            })
          }
        },
        {
          immediate: true
        }
      )
      // 切换
      const onUpdatePageSize = (size: number) => {
        $state.pageSize = size
        $state.pageIndex = 1
        getData()
      }



      // 获取数据
      const getData = () => {

        let { fetch, actions } = $props.params;
        let fetchHandle: any = undefined;
        if(actions) {
          fetchHandle = () => $store
            .dispatch($props.params.actions, {
              ...($props.params.data || {}),
              pageNum: $state.pageIndex,
              pageSize: $state.pageSize
            })
        }
        if(fetch) {
          fetchHandle = () => {

            const api = fetch({
              ...($props.params.data || {}),
              pageNum: $state.pageIndex,
              pageSize: $state.pageSize
            }).then((res: any) => Promise.resolve(res));
            return api;
          }
        }
        if (fetchHandle) {
          $emit('update:loading', true)
          fetchHandle()
            .then((res) => {
              $emit('update:immediate', false)
              $emit('update:loading', false)
              // 向上返回当前页码
              $emit('change', res, {
                page: $state.pageIndex,
                pageSize: $state.pageSize
              })
              if (res.pageInfo) {
                $state.total = res.pageInfo.total
              }
            })
            .catch(() => {
              $emit('update:immediate', false)
              $emit('update:loading', false)
            })
        } else {
          console.error('必要参数不能为空')
        }
      }

      return {
        ...toRefs($state),
        getData,
        onUpdatePageSize
      }
    }
  })
</script>

<style></style>
